<template>
	<tip-list title="项目基本情况" :class="{headclass:headclassBol}">
		<div class="public-form inner-container">
			<div class="clearfix search-header">
				<ul class="input list clearfix">
					<li>
						<my-tooltip text="项目名称"></my-tooltip>
						<div class="box">
							<el-input v-model="searchFrom.keyword" placeholder="请输入项目名称"></el-input>
						</div>
					</li>
					<div style="height:65px;padding:5px 0px 0px 0px;float:left">
						<el-button @click="reset" style="float:right;width:120px">重置</el-button>
						<el-button type="primary" @click="queryList()" style="float:right;margin-right:20px;width:120px">查询</el-button>
					</div>
				</ul>
			</div>
			<el-table :data="tableData" style="width: 100%" :height="tableHeight">
				<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="name" label="项目名称" width="280" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Jan" label="一月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Feb" label="二月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Mar" label="三月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Apr" label="四月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="May" label="五月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Jun" label="六月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Jul" label="七月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Aug" label="八月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Sep" label="九月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Oct" label="十月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Nov" label="十一月" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="Dec" label="十二月" width="100" show-overflow-tooltip>
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="150">
					<template scope="row">
						<el-button @click="edit(row)" type="text" size="small">
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="page" v-show="total">
				<el-pagination :current-page="searchFrom.current" :page-size="searchFrom.size" @size-change="handleSizeChange" @current-change="pageChange" layout="total,prev, pager, next,jumper" :total="total">
				</el-pagination>
			</div>
			<plan-edit v-if="showEdit" :showDialogId="showDialogId" :showDialog.sync="showEdit"></plan-edit>
		</div>
	</tip-list>
</template>
<script>
	import tipList from '../../public/TidiList'
	import planEdit from '../Project/projectplanDialog/PlanEdit.vue'

	export default {
		components: {
			tipList,
			planEdit
		},
		created() {
			this.eventBus.$on('planUpdate', () => {
				this.queryList()
			})
			this.queryList()
		},
		mounted() {
			setTimeout(() => {
				this.headclassBol = true;
			}, 500)
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				//得到初始高度
				let contentHeight = $('.content').height(),
					wrapListHeight = $('.view-box-header').height(),
					warpBoxHigeht = $('.list').height(),
					typeBoxHigeht = $('.typeClass').height(),
					pageHigeht = $('.page').height();
				this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - typeBoxHigeht - pageHigeht - 120
				console.log(wrapListHeight, warpBoxHigeht, contentHeight, pageHigeht, typeBoxHigeht, this.tableHeight)
				//计算显示高度
				var timer = null;
				$(window).resize(() => {
					clearTimeout(timer)
					timer = setTimeout(() => {
						let contentHeight = $('.content').height(),
							wrapListHeight = $('.view-box-header').height(),
							warpBoxHigeht = $('.list').height(),
							typeBoxHigeht = $('.typeClass').height(),
							pageHigeht = $('.page').height();
						this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - warpBoxHigeht - pageHigeht - 120
					}, 200)
				})
			} else {
				this.tableHeight = "";
			}
		},
		destroyed() {
			//移除监听
			$(window).unbind()
		},
		data() {
			return {
				headclassBol: false,
				searchFrom: {
					current: 1, //页码
					size: 15, //每页条数
					keyword: '', //名称
				},
				total: 0, //总条数
				tableHeight: '', //table高度
				tableData: [],
				showEdit: false,
				showDialogId: '', //显示对于dialogID
			}
		},
		methods: {
			queryList(type) {
				/*如果是点击查询，页码初始化为1*/
				if(type && this.searchFrom.current != 1) {
					this.searchFrom.current = 1
					return false
				}
				this.ajax({
					url: 'tProjectYear/selectProjectProgressPage',
					data: this.searchFrom
				}).then(data => {
					this.total = data.total
					this.tableData = this.formateData(data.records);
				})
			},
			formateData(data) {
				for(var i = 0; i < data.length; i++) {
					if(data[i].Apr) {
						var Apr = data[i].Apr.split('###');
						data[i].Apr = this.unionData(Apr);
					}
					if(data[i].Aug) {
						var Aug = data[i].Aug.split('###');
						data[i].Aug = this.unionData(Aug);
					}
					if(data[i].Dec) {
						var Dec = data[i].Dec.split('###');
						data[i].Dec = this.unionData(Dec);
					}
					if(data[i].Feb) {
						var Feb = data[i].Feb.split('###');
						data[i].Feb = this.unionData(Feb);
					}
					if(data[i].Jan) {
						var Jan = data[i].Jan.split('###');
						data[i].Jan = this.unionData(Jan);
					}
					if(data[i].Jul) {
						var Jul = data[i].Jul.split('###');
						data[i].Jul = this.unionData(Jul);
					}
					if(data[i].Jun) {
						var Jun = data[i].Jun.split('###');
						data[i].Jun = this.unionData(Jun);
					}
					if(data[i].Mar) {
						var Mar = data[i].Mar.split('###');
						data[i].Mar = this.unionData(Mar);
					}
					if(data[i].May) {
						var May = data[i].May.split('###');
						data[i].May = this.unionData(May);
					}
					if(data[i].Nov) {
						var Nov = data[i].Nov.split('###');
						data[i].Nov = this.unionData(Nov);
					}
					if(data[i].Oct) {
						var Oct = data[i].Oct.split('###');
						data[i].Oct = this.unionData(Oct);
					}
					if(data[i].Sep) {
						var Sep = data[i].Sep.split('###');
						data[i].Sep = this.unionData(Sep);
					}
				}
				return data;
			},
			unionData(data) {
				var text = "";
				data[0]?text+='计划完成'+data[0]+'万元':'';
				data[1]?text+='\n'+data[1]:'';
				return text;
			},
			/*编辑*/
			edit(data) {
				/*当前选择的数据id*/
				this.showDialogId = data.row.id
				/*显示dialog*/
				this.showEdit = true
			},
			pageChange(val) {
				this.searchFrom.current = val
				this.queryList()
			},
			//输入页码跳转
			handleSizeChange() {
				this.searchFrom.current = val
				this.queryList()
			},
			reset() { //查询框重置
				this.searchFrom.keyword = '', //名称
					this.queryList();
			}
		}
	}
</script>
<style lang="less" scoped>
	.headclass {
		width: 99%;
	}
	
	.public-form {
		.search-header {
			position: relative;
			.search-btn {
				position: absolute;
				top: 4px;
				right: 0;
			}
		}
		ul.input {
			float: left;
			// padding-right: 200px;
			// margin-left:-25px;
			width: 100%;
			li {
				float: left;
				width: 25%;
				padding: 5px 0 5px 20px;
				margin-bottom: 5px;
				span {
					float: left;
					width: 80px;
					line-height: 36px;
					display: block;
					text-indent: 5px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.box {
					width: 100%;
					padding-left: 160px;
				}
			}
		}
	}
</style>
<style lang="less">
	.public-form {
		.desc {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
		.el-form-item__label {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
		.el-textarea__inner {
			height: 87px;
		}
		.el-date-editor.el-input {
			width: 100%;
		}
		.el-select {
			width: 100%;
		}
	}
</style>